<template>
    <div class="main">
        <van-tabs v-model="catLogIndex">
            <van-tab v-for="item in catlog" v-bind:key="item.key" :title="item.name">
            </van-tab>
        </van-tabs>
        <div class="content" v-show="conIndex>0">
            <div>
                <div v-show="catLogIndex==0">
                    <div class="list-wrap">
                        <h5>年份</h5>
                        <ul class="list">
                            <li v-for="item in s_nf" @click="xj_nf_click(item)" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>产地</h5>
                        <ul class="list">
                            <li v-for="item in s_cd" @click="selCD(item)" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>类型</h5>
                        <ul class="list">
                            <li v-for="item in s_lx" :key="item.key" @click="item.sel = !item.sel" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <ul v-show="xj_jhd==2" class="list">
                            <li v-for="item in s_jhd2" @click="item.sel = !item.sel" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>质量</h5>
                        <ul class="quality">
                            <li>
                                <label>等级</label>
                                <select id="selDJ1">
                                                                            <option v-for="item in z_dj" :key="item"  :value="item">{{item}}</option>
                                                                    </select>
                            </li>
                            <li>
                                <label>长度</label>
                                <select id="selCD1">
                                                                            <option v-for="item in z_cd" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>强力</label>
                                <select id="selQL1">
                                                                            <option v-for="item in z_ql" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label style="width:2em;">马值</label>
                                <select id="selMZ11" class="sel_w50">
                                                                            <option v-for="item in z_mz1" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                                <select id="selMZ21" class="sel_w50">
                                                                            <option v-for="item in z_mz2" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>含杂</label>
                                <select id="selHZ1">
                                                                            <option v-for="item in z_hz" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>整齐度</label>
                                <select id="selZQD1">
                                                                            <option v-for="item in z_zqd" :key="item"  :value="item">{{item}}</option>
                                                                    </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-show="catLogIndex==3">
                    <div class="list-wrap">
                        <h5>年份</h5>
                        <ul class="list">
                            <li v-for="item in s_nf" @click="xj_nf_click(item)" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>产地</h5>
                        <ul class="list">
                            <li v-for="item in d_cd" @click="selCD2(item)" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>类型</h5>
                        <ul class="list">
                            <li v-for="item in s_lx" :key="item.key" @click="item.sel = !item.sel" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <ul v-show="xj_jhd==2" class="list">
                            <li v-for="item in s_jhd2" @click="item.sel = !item.sel" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>质量</h5>
                        <ul class="quality">
                            <li>
                                <label>等级</label>
                                <select id="selDJ2">
                                                                            <option v-for="item in z_dj" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>长度</label>
                                <select id="selCD2">
                                                                            <option v-for="item in z_cd" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>强力</label>
                                <select id="selQL2">
                                                                            <option v-for="item in z_ql" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label style="width:2em;">马值</label>
                                <select id="selMZ12" class="sel_w50">
                                                                            <option v-for="item in z_mz1" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                                <select id="selMZ22" class="sel_w50">
                                                                            <option v-for="item in z_mz2" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>含杂</label>
                                <select id="selHZ2">
                                                                            <option v-for="item in z_hz" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>整齐度</label>
                                <select id="selZQD2">
                                                                            <option v-for="item in z_zqd" :key="item"  :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-show="catLogIndex==2">
                    <div class="list-wrap">
                        <h5>产地</h5>
                        <ul class="list">
                            <li v-for="item in j_cd" @click="item.sel = !item.sel" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>质量</h5>
                        <ul class="quality">
                            <li>
                                <label>等级</label>
                                <select id="selDJ3">
                                                                            <option v-for="item in j_z_dj" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>长度</label>
                                <select id="selCD3">
                                                                            <option v-for="item in j_z_cd" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>强力</label>
                                <select id="selQL3">
                                                                            <option v-for="item in j_z_ql" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>马值</label>
                                <select id="selMZ3">
                                                                            <option v-for="item in j_z_mz" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <div v-show="catLogIndex==1">
                    <div class="list-wrap">
                        <h5>产地</h5>
                        <ul class="list">
                            <li v-for="item in j_cd" @click="item.sel = !item.sel" :key="item.key" :class="{'sel':item.sel}">{{item.name}}</li>
                        </ul>
                        <h5>质量</h5>
                        <ul class="quality">
                            <li>
                                <label>等级</label>
                                <select id="selDJ4">
                                                                            <option v-for="item in j_z_dj" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>长度</label>
                                <select id="selCD4">
                                                                            <option v-for="item in j_z_cd" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>强力</label>
                                <select id="selQL4">
                                                                            <option v-for="item in j_z_ql" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                            <li>
                                <label>马值</label>
                                <select id="selMZ4">
                                                                            <option v-for="item in j_z_mz" :key="item"   :value="item">{{item}}</option>
                                                                        </select>
                            </li>
                        </ul>
                    </div>
                </div>
                <ul class="info">
                    <li>
                        <div class="fl"><span>联系人：</span><input v-model="data.LinkMan" type="text"><span>电话：</span><input v-model="data.LinkTel" type="text"></div>
                        <div class="fr">
                            <van-radio-group class="inline" v-model="data.ShowTel">
                                <van-radio name="1">显示</van-radio>
                                <van-radio name="0">隐藏</van-radio>
                            </van-radio-group>
                        </div>
                    </li>
                    <li>
                        <div class="fl"><span>需求单位：</span><input style="width:10em;" v-model="data.NeedEntName" placeholder="请输入需求单位：" type="text"></div>
                    </li>
                    <li>
                        <div class="fl"><span>需求数量：</span><input style="width:10em;" v-model="data.NeedNum" placeholder="请输入需求数量" type="text"></div>
                        <div class="fr">
                            <van-radio-group class="inline" v-model="data.NeedDW">
                                <van-radio name="吨">吨</van-radio>
                                <van-radio name="批">批</van-radio>
                                <van-radio name="柜">柜</van-radio>
                            </van-radio-group>
                        </div>
                    </li>
                    <li>
                        <div class="fl"><span>收货地：</span><input v-model="data.JHD" placeholder="请输入交货地" style="width:10em;" type="text"></div>
                    </li>
                    <li>
                        <div class="fl"><span>最晚交货时间：</span><input style="width:15em;" v-model="data.LatestDate" type="date"></div>
                    </li>
                    <li>
                        <div class="fl"><span>是否对外公开显示供应商的报价：</span> </div>
                        <div class="fr">
                            <van-radio-group class="inline" v-model="data.ShowBJ">
                                <van-radio name="1">显示</van-radio>
                                <van-radio name="0">隐藏</van-radio>
                            </van-radio-group>
                        </div>
                    </li>
                    <li>
                        <div class="fl"><span>备注：</span><input v-model="data.ReMark" placeholder="对三丝要求，最高接收报价等" style="width:15em;" type="text"></div>
                    </li>
                </ul>
                <div class="btns2" @click="save">发布</div>
                <van-popup v-model="showDate" position="bottom">
                    <van-datetime-picker v-model="data.LatestDate" @cancel="cancel" @confirm="confirm" type="date" :min-date="minDate" />
                </van-popup>
            </div>
        </div>
    </div>
</template>

<script>
    import {
        Toast,
        DatetimePicker
    } from 'vant';
    import api from '@/api/api'
    export default {
        data() {
            return {
                catLogIndex: 0,
                conIndex: 1,
                xj_jhd: 0,
                rdLXR: '1',
                showDate: false,
                minDate: new Date(),
                currentDate: '',
                data: {
                    DengJi: '31+',
                    ChangDu: '28+',
                    QiangLi: '25',
                    MaZhi1: '4.2',
                    MaZhi2: '5.1',
                    HanZa: '0.6-',
                    ZhengQiDu: '81+',
                    LinkMan: '',
                    LinkTel: '',
                    NeedEntName: '',
                    NeedNum: '',
                    LatestDate: '',
                    ReMark: '',
                    ShowTel: "1",
                    ShowBJ: "1",
                    NeedDW: '吨',
                    ReMark: '',
                    JHD: ''
                },
                s_cd: [{name:'不限',key:'60',sel:false},{name:'地方',key:'6001',sel:false},{name:'兵团',key:'6002',sel:false}],
                z_dj: ['11', '21', '31+', '41+', '51+', '12+', '22+', '32+', '13+', '23+', '33+', '14+', '24+'],
                z_cd: ['不限', '25+', '25.5+', '26+', '26.5+', '27+', '27.5+', '28+', '28.5+', '29+', '29.5+', '30+'],
                z_ql: ['25', '25.5', '26', '26.5', '27', '27.5', '28', '28.5', '29', '不限'],
                z_mz1: ['2.5', '2.8', '3.0', '3.5', '3.6', '3.7', '3.8', '3.9', '4.0', '4.1', '4.2', '4.3', '4.4', '4.5', '不限'],
                z_mz2: ['3.5', '3.8', '3.9', '4.0', '4.1', '4.2', '4.3', '4.4', '4.5', '4.6', '4.7', '4.8', '4.9', '5.0', '5.1', '5.1+', '5.2', '5.2+', '5.3', '不限'],
                z_hz: ['不限', '0.6-', '1.0-', '1.2-', '1.5-', '2.0-', '2.5-', '3.0-', '3.0+'],
                z_zqd: ['不限', '79+', '80+', '81+', '82+', '82.5+', '83+'],
                j_z_dj: ['不限', 'GM', 'SM', 'M+', 'SLM+', 'LM+'],
                j_z_cd: ['不限', '1', '1-1/32+', '1-1/16+', '1-3/32+', '1-1/8+', '1-5/32+'],
                j_z_ql: ['不限', '25+', '26+', '27+', '28+', '29+'],
                j_z_mz: ['不限', 'G1', 'G2', 'G3', 'G4', 'G5', 'G6', 'G7'],
                catlog: [{
                        name: '新疆棉',
                        key: '1'
                    },
                   {
                        name: '进口棉$',
                        key: '4'
                    },
                    {
                        name: '进口棉¥',
                        key: '3'
                    },
                    
                     {
                        name: '地产棉',
                        key: '2'
                    },
                ],
                s_nf: [{
                        name: '新棉',
                        key: '1',
                        sel: false
                    },
                    {
                        name: '拍储棉',
                        key: '2',
                        sel: false
                    }
                ],
                d_cd: this.$store.state.d_cd,
                j_cd: this.$store.state.j_cd,
                s_lx: [{
                    name: '手摘棉',
                    key: '1',
                    sel: false
                }, {
                    name: '机采棉',
                    key: '2',
                    sel: false
                }, {
                    name: '皮辊棉',
                    key: '3',
                    sel: false
                }, {
                    name: '长绒棉',
                    key: '4',
                    sel: false
                }],
                s_ysj: [{
                    name: '11',
                    key: '1',
                    sel: false
                }, {
                    name: '21',
                    key: '2',
                    sel: false
                }, {
                    name: '31',
                    key: '3',
                    sel: false
                }, {
                    name: '41',
                    key: '4',
                    sel: false
                }, {
                    name: '51',
                    key: '5',
                    sel: false
                }, {
                    name: '12',
                    key: '6',
                    sel: false
                }, {
                    name: '22',
                    key: '7',
                    sel: false
                }, {
                    name: '32',
                    key: '8',
                    sel: false
                }, {
                    name: '13',
                    key: '9',
                    sel: false
                }, {
                    name: '23',
                    key: '10',
                    sel: false
                }, {
                    name: '33',
                    key: '11',
                    sel: false
                }, {
                    name: '14',
                    key: '12',
                    sel: false
                }, {
                    name: '24',
                    key: '13',
                    sel: false
                }],
                s_jhd_type: [{
                    name: '新疆仓库',
                    key: '1',
                    sel: false
                }, {
                    name: '内地仓库',
                    key: '2',
                    sel: false
                }],
                j_s_jhd: [{
                    name: '保税仓库交货',
                    key: '1',
                    sel: false
                }, {
                    name: '海运在途',
                    key: '2',
                    sel: false
                }, {
                    name: '原产地装运',
                    key: '3',
                    sel: false
                }],
                s_jhd1: [{
                    name: '南疆',
                    key: '1',
                    sel: false
                }, {
                    name: '北疆',
                    key: '2',
                    sel: false
                }, {
                    name: '东疆',
                    key: '3',
                    sel: false
                }],
                s_jhd2: [{
                        name: "不限",
                        key: "10",
                        sel: false
                    },
                    {
                        name: "江苏",
                        key: "11",
                        sel: false
                    },
                    {
                        name: "上海",
                        key: "12",
                        sel: false
                    },
                    {
                        name: "浙江",
                        key: "13",
                        sel: false
                    },
                    {
                        name: "安徽",
                        key: "14",
                        sel: false
                    },
                    {
                        name: "福建",
                        key: "15",
                        sel: false
                    },
                    {
                        name: "湖北",
                        key: "16",
                        sel: false
                    },
                    {
                        name: "湖南",
                        key: "17",
                        sel: false
                    },
                    {
                        name: "江西",
                        key: "18",
                        sel: false
                    },
                    {
                        name: "四川",
                        key: "19",
                        sel: false
                    },
                    {
                        name: "山东",
                        key: "20",
                        sel: false
                    },
                    {
                        name: "河南",
                        key: "21",
                        sel: false
                    },
                    {
                        name: "河北",
                        key: "22",
                        sel: false
                    },
                    {
                        name: "山西",
                        key: "23",
                        sel: false
                    },
                    {
                        name: "天津",
                        key: "24",
                        sel: false
                    }
                ],
                s_jyms: [{
                    name: '现价成交',
                    key: '1',
                    sel: false
                }, {
                    name: '期货点价',
                    key: '2',
                    sel: false
                }, {
                    name: '远期交货',
                    key: '3',
                    sel: false
                }],
                s_ghs: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
                s_px: [{
                    name: '特价',
                    key: '1',
                    sel: false
                }, {
                    name: '已售',
                    key: '2',
                    sel: false
                }, {
                    name: '预售',
                    key: '3',
                    sel: false
                }, {
                    name: '挂单',
                    key: '4',
                    sel: false
                }, {
                    name: '保留',
                    key: '5',
                    sel: false
                }]
            }
        },
        created() {
            this.data.LatestDate = addDays(7);
            this.data.LinkMan = this.$store.state.userInfo.XM;
            this.data.LinkTel = this.$store.state.userInfo.phoneno;
            this.data.NeedEntName = this.$store.state.userInfo.EntName;
            this.data.EntName = this.$store.state.userInfo.EntName;
            this.data.UserID = this.$store.state.userInfo.ID;
            this.data.UserName = this.$store.state.userInfo.XM;

            setTimeout(() => {
                $("#selDJ1").val('31+');
                $("#selCD1").val('28+');
                $("#selQL1").val('26');
                $("#selMZ11").val('4.2');
                $("#selMZ21").val('5.2+');
                $("#selHZ1").val('1.5-');
                $("#selZQD1").val('81+');

                $("#selDJ2").val('41+');
                $("#selCD2").val('27+');
                $("#selQL2").val('27');
                $("#selMZ12").val('3.8');
                $("#selMZ22").val('5.1');
                $("#selHZ2").val('2.0-');
                $("#selZQD2").val('81+');
            }, 500);
        },
        methods: {
            confirm() {
                this.showDate = false;
            },
            cancel() {
                this.showDate = false;
            },
            selCD2(item) {
                item.sel = !item.sel;
                if (item.key == "01") {
                    this.d_cd.forEach(n => {
                        if (n.key != '01') {
                            n.sel = false;
                        }
                    });
                    this.d_cd[1].list.forEach(n => {
                        n.sel = false;
                    });
                } else {
                    this.d_cd[0].sel = false;
                }
            },
            save() {
                var nf = this.s_nf.find(n => n.sel);
                var cd = this.s_cd.find(n => n.sel);
                var cdd = this.d_cd.find(n => n.sel);
                var cdj = this.j_cd.find(n => n.sel);
                var lx = '';
                this.s_lx.forEach(n => {
                    if (n.sel) {
                        lx += n.name + ';';
                    }
                });
                var jhd = this.s_jhd_type.find(n => n.sel);
                var jhd2 = this.s_jhd2.find(n => n.sel); {
                    if (this.catLogIndex == 0 || this.catLogIndex == 3) {
                        if (nf == null) {
                            Toast.fail('请选择年份');
                            return;
                        }
                    }
                    if (this.catLogIndex == 0) {
                        if (cd == null) {
                            Toast.fail('请选择产地');
                            return;
                        }
                        if (lx == null) {
                            Toast.fail('请选择类型');
                            return;
                        }
                    } else if (this.catLogIndex == 3) {
                        if (cdd == null) {
                            Toast.fail('请选择产地');
                            return;
                        }
                        if (lx == null) {
                            Toast.fail('请选择类型');
                            return;
                        }
                    } else if (this.catLogIndex == 2) {
                        if (cdj == null) {
                            Toast.fail('请选择产地');
                            return;
                        }
                    }
                }
                var MadeIn = "";
                var MadeInName = '';
                var jhdName = '';
                var data = {};
                if (this.catLogIndex == 0) {
                    this.s_cd.forEach(n => {
                        if (n.sel) {
                            if (n.list) {
                                let s_cd_subItem = "";
                                let s_cd_subItemName = "";
                                n.list.forEach(k => {
                                    if (k.sel) {
                                        s_cd_subItem += k.key + ";";
                                        s_cd_subItemName += k.name + ";";
                                    }
                                });
                                if (!s_cd_subItem) {
                                    s_cd_subItem += n.key + ";";
                                    s_cd_subItemName += n.name + ";";
                                }
                                MadeIn += s_cd_subItem;
                                MadeInName += s_cd_subItemName;
                            } else {
                                MadeIn += n.key + ';';
                                MadeInName += n.name + ';';
                            }
                        }
                    });
                    this.data.CDCode = MadeIn;
                    this.data.CDName = MadeInName;
                    this.data.CType = lx;
                    this.data.NeedYear = nf.key;
                    this.data.DengJi = $('#selDJ1').val();
                    this.data.ChangDu = $('#selCD1').val();
                    this.data.QiangLi = $('#selQL1').val();
                    this.data.MaZhi1 = $('#selMZ11').val();
                    this.data.MaZhi2 = $('#selMZ21').val();
                    this.data.HanZa = $('#selHZ1').val();
                    this.data.ZhengQiDu = $('#selZQD1').val();
                } else if (this.catLogIndex == 3) {
                    this.d_cd.forEach(n => {
                        if (n.sel) {
                            MadeInName += n.name + ";";
                            MadeIn += n.key + ";";
                        }
                    });
                    this.data.CDCode = MadeIn;
                    this.data.CDName = MadeInName;
                    this.data.CType = lx;
                    this.data.NeedYear = nf.key;
                    this.data.DengJi = $('#selDJ2').val();
                    this.data.ChangDu = $('#selCD2').val();
                    this.data.QiangLi = $('#selQL2').val();
                    this.data.MaZhi1 = $('#selMZ12').val();
                    this.data.MaZhi2 = $('#selMZ22').val();
                    this.data.HanZa = $('#selHZ2').val();
                    this.data.ZhengQiDu = $('#selZQD2').val();
                } else if (this.catLogIndex == 2) {
                    this.j_cd.forEach(n => {
                        if (n.sel) {
                            MadeInName += n.name + ";";
                            MadeIn += n.key + ";";
                        }
                    });
                    this.data.CDCode = MadeIn;
                    this.data.CDName = MadeInName;
                    this.data.DengJi = $('#selDJ3').val();
                    this.data.ChangDu = $('#selCD3').val();
                    this.data.QiangLi = $('#selQL3').val();
                    this.data.MaZhi1 = $('#selMZ3').val();
                } else if (this.catLogIndex == 1) {
                    this.j_cd.forEach(n => {
                        if (n.sel) {
                            MadeInName += n.name + ";";
                            MadeIn += n.key + ";";
                        }
                    });
                    this.data.CDCode = MadeIn;
                    this.data.CDName = MadeInName;
                    this.data.DengJi = $('#selDJ4').val();
                    this.data.QiangLi = $('#selQL4').val();
                    this.data.MaZhi1 = $('#selMZ4').val();
                }
                this.data.NeedType = this.catLogIndex;
                api.AddSupply(this.data).then(res => {
                    if (res.success) {
                        Toast.success(res.msg);
                        this.$router.push('/supply');
                    } else {
                        Toast.fail(res.msg);
                    }
                })
            },
            selCD(item) {
                item.sel = !item.sel;
                if (item.key == "60") {
                    this.s_cd.forEach(n => {
                        if (n.key != "60") {
                            n.sel = false;
                        }
                    });
                } else {
                    this.s_cd[0].sel = false;
                }
            },
            xj_jhd_click(item) {
                var d = this.s_jhd_type.find(n => n.sel);
                if (d != null) {
                    d.sel = !d.sel;
                }
                item.sel = !item.sel;
                this.xj_jhd = item.key;
            },
            xj_nf_click(item) {
                var d = this.s_nf.find(n => n.sel);
                if (d != null && d.key != item.key) {
                    d.sel = false;
                }
                item.sel = !item.sel;
            },
            j_s_jhd_Click(item) {
                var d = this.j_s_jhd.find(n => n.sel);
                if (d != null && d.key != item.key) {
                    d.sel = false;
                }
                item.sel = !item.sel;
            }
        },
    }
</script>

<style scoped lang='less'>
    .main {
        .btns2 {
            display: inline-block;
            width: 40%;
            background: #2cb98e;
            color: #fff;
            font-size: 14px;
            height: 2em;
            line-height: 2em;
            text-align: center;
            margin: 1em auto;
        }
        .info {
            padding: 0 10px;
            li {
                height: 3em;
                line-height: 3em;
                font-size: 12px;
                text-align: left;
                border-top: 1px solid #ccc;
                width: 100%;
                .inline {
                    .van-radio {
                        display: inline-block;
                    }
                }
                input {
                    height: 1.5em;
                    height: 2em;
                    width: 4em;
                    border: 0;
                }
            }
        }
        .content {
            >div {}
            .list-wrap {
                overflow-y: scroll;
                padding: 0 10px 20px 10px;
            }
            width: 100%;
            background: #fff;
            z-index: 9;
            .quality {
                margin-top: 10px;
                text-align: left;
                font-size: 12px;
                flex-wrap: wrap;
                label {
                    width: 3em;
                    display: inline-block;
                    text-align: right;
                }
                li {
                    min-width: 12em;
                    max-width: 12em;
                    float: left;
                    height: 2.5em;
                }
            }
            select {
                outline: 0;
                background: rgba(0, 0, 0, 0);
                width: 6em;
                height: 20px;
                font-size: 12px;
                text-align: center;
                border: 1px #ccc solid;
                border-radius: 5px;
                option {
                    color: black;
                    line-height: 15px;
                    height: 15px;
                }
            }
            .sel_w50 {
                width: 4em;
            }
            .list {
                text-align: left;
                margin-top: 10px;
                li {
                    display: inline-block;
                    background: #f0f0f0;
                    width: 20%;
                    font-size: 12px;
                    text-align: center;
                    line-height: 2em;
                    height: 2em;
                    border: 1px solid #ccc;
                    margin-right: 1em;
                    margin-bottom: 5px;
                    color: #000;
                    cursor: pointer;
                }
                .sel {
                    background: #2cb98e;
                    color: #fff;
                    border-color: #2cb98e;
                }
            }
            h5 {
                text-align: left;
                margin-top: 0.5em;
            }
        }
    }
</style>